<!-- 03VueInstance.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
	<link rel="stylesheet" href="./css/common.css"/>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<!-- <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script> -->
	<!-- <script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.min.js"></script> -->
</head>
<body>
	<h3>v-for 遍历数组</h3>
	<div class="div-demo-block">
		<p>item in items</p>
		<ul id="demo">
			<li v-for="item in items">
				{{ item.msg }}
			</li>
		</ul>
	</div>
	
	<div class="div-demo-block">
		<p>(item, index) in items</p>
		<ul id="demo2">
			<li v-for="(item, index) in items">
				{{index}} : {{ item.msg }}
			</li>
		</ul>
	</div>
	
	<h3>v-for 遍历对象</h3>
	
	<div class="div-demo-block">
		<p>(val, key) in object</p>
		<ul id="demo3">
			<li v-for="(val, key) in object">
				{{key}} : {{ val }}
			</li>
		</ul>
	</div>
	
	<div class="div-demo-block">
		<p>(val, key, index) in object</p>
		<ul id="demo4">
			<li v-for="(val, key, index) in object">
				{{index}}. {{key}} : {{ val }}
			</li>
		</ul>
	</div>
	
    <script>
        var demo = new Vue({
            el: '#demo',
            data: {
				items: [
					{msg: 'Hello'},
					{msg: 'World'},
					{msg: 'Foo'},
					{msg: 'Bar'}
				]
            }
        });
		var demo2 = new Vue({
            el: '#demo2',
            data: {
				items: [
					{msg: 'Hello'},
					{msg: 'World'},
					{msg: 'Foo'},
					{msg: 'Bar'}
				]
            }
        });
		var demo3 = new Vue({
            el: '#demo3',
            data: {
				object : {
					title: 'How to do lists in Vue',
					author: 'Jane Doe',
					publishedAt: '2016-04-10'
				}
            }
        });
		var demo4 = new Vue({
            el: '#demo4',
            data: {
				object : {
					title: 'How to do lists in Vue',
					author: 'Jane Doe',
					publishedAt: '2016-04-10'
				}
            }
        });
    </script>
</body>
</html>